{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## The `Image` Mark\n",
    "\n",
    "`Image` is a `Mark` object, used to visualize images in standard format (png, jpg etc...), in a `bqplot` `Figure`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "It takes as input an `ipywidgets` [Image](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html#Image) widget"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### The ipywidgets Image"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "import os\n",
    "\n",
    "image_path = os.path.abspath('../../data_files/trees.jpg')\n",
    "\n",
    "with open(image_path, 'rb') as f:\n",
    "    raw_image = f.read()\n",
    "ipyimage = widgets.Image(value=raw_image, format='jpg')\n",
    "ipyimage"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Displaying the image inside a bqplot Figure"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bqplot import LinearScale, Figure, Lines, Axis, Image\n",
    "\n",
    "# Create the scales for the image coordinates\n",
    "scales={'x': LinearScale(), 'y': LinearScale()}\n",
    "# Define the bqplot Image mark\n",
    "image = Image(image=ipyimage, scales=scales)\n",
    "# Create the bqplot Figure to display the mark\n",
    "fig = Figure(title='Trees', marks=[image], padding_x=0, padding_y=0)\n",
    "fig"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Mixing with other marks\n",
    "\n",
    "`Image` is a mark like any other, so they can be mixed and matched together."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "scales = {'x': LinearScale(min=-1, max=2), 'y': LinearScale(min=-0.5, max=2)}\n",
    "image = Image(image=ipyimage, scales=scales)\n",
    "lines = Lines(x=[0, 1, 1, 0, 0], y=[0, 0, 1, 1, 0], scales=scales, colors=['red'])\n",
    "fig = Figure(marks=[image, lines], padding_x=0, padding_y=0, animation_duration=1000)\n",
    "fig.axes = [Axis(scale=scales['x']), Axis(scale=scales['y'], orientation='vertical')]\n",
    "fig"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Its traits (attributes) will also respond dynamically to a change from the backend"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Full screen\n",
    "image.x = [-1, 2]\n",
    "image.y = [-.5, 2]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Interactions\n",
    "\n",
    "Like other bqplot marks, you can watch for mouse clicks. For the image mark, the position of the click (on the x/y scale set up in the figure) is returned."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def print_event(_, target):\n",
    "    print(target)\n",
    "    \n",
    "image.on_element_click(print_event)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Pyplot\n",
    "\n",
    "It may seem verbose to first open the image file, create an `ipywidgets` `Image`, then create the scales and so forth.\n",
    "\n",
    "The `pyplot` api does all of that for you, via the `imshow` function."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import bqplot.pyplot as bqp\n",
    "\n",
    "bqp.figure()\n",
    "bqp.imshow(image_path, 'filename')\n",
    "bqp.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "The signature is \n",
    "\n",
    "`bqp.imshow(image, format)`\n",
    "\n",
    "- `image` is the `Image` data, depending on the passed `format`, can be one of:\n",
    "    - an instance of an ipywidgets Image\n",
    "    - a file name\n",
    "    - a raw byte string\n",
    "- `format`: {'widget', 'filename', ...}\n",
    "   Type of the input argument.\n",
    "   If not 'widget' or 'filename', must be a format supported by the \n",
    "   `ipywidgets` `Image`.\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
